<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <title>GRAVITY</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="/libraries/bootstrap/gravity/css/dark.css" rel="stylesheet">
        <script src="/libraries/bootstrap/js/jquery-1.9.1.min.js"></script>
        <script src="/libraries/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/libraries/script/jquery.nailthumb.1.1.js"></script>
        <script type="text/javascript" src="/libraries/script/jquery.lazyload.min.js"></script>
        <script type="text/javascript" src="http://pxq.vn//libraries/jssorslider/js/jssor.core.min.js"></script>
        <script type="text/javascript" src="http://pxq.vn//libraries/jssorslider/js/jssor.utils.min.js"></script>
        <script type="text/javascript" src="http://pxq.vn//libraries/jssorslider/js/jssor.slider.min.js"></script>
        <!--[if IE]><meta http-equiv="imagetoolbar" content="no"><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script><![endif]-->
        <script type="text/javascript">
            function photoSlider() {
                //<<<---START SLIDERTOP
                if ($('#SliderTop').length > 0) {
                    try {


                        var sliderTopOptions = {
                            $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                            $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                            $AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                            $PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3

                            $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                            $SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                            $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
                            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                            $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
                            $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                            $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                            $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, direction navigator container, thumbnail navigator container etc).
                            $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
                            $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                            $DirectionNavigatorOptions: {
                                $Class: $JssorDirectionNavigator$, //[Requried] Class to create direction navigator instance
                                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                            }

                        };
                        var SliderTop;//= new $JssorSlider$('SliderTop', sliderTopOptions);
                        

                        //responsive code begin
                        //you can remove responsive code if you don't want the slider scales while window resizes
                        function ScaleSliderTop() {
                            //if (navigator.userAgent.match(/(Linux)/)) {
                            var np_width = $('#SliderTop').parent().width();
                            var np_height = $('#SliderTop').parent().height();
                            $('#SliderTop').html(SliderTopContent);
                            $('#SliderTop,#SliderTop>div[u="slides"]').css({
                                width: np_width,
                                height: np_height
                            });

                            $('#SliderTop div.jssorthumbs[u="thumbnavigator"]').replaceWith('<div u="navigator" class="slider1-N" style="position: absolute; bottom: 4px; right: 4px;">\
                                <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>\
                            </div>');
                            sliderTopOptions.$ThumbnailNavigatorOptions = null;
                            sliderTopOptions.$NavigatorOptions = {//[Optional] Options to specify and enable navigator or not
                                $Class: $JssorNavigator$, //[Required] Class to create navigator instance
                                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                                $AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                                $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
                                $Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
                                $SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
                                $SpacingY: 10, //[Optional] Vertical space between each item in pixel, default value is 0
                                $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                            };

                            SliderTop = new $JssorSlider$('SliderTop', sliderTopOptions);

                            //} else {
                            //    ScaleSliderTop();
                            //}

                        }
                        //if (!navigator.userAgent.match(/(Linux)/)) {
                        ScaleSliderTop();
                        //}
                        var tScaleSliderTop = function() {
                        };
                        //if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {

                        //}
                        //$JssorPlayer$.$FetchPlayers(document.body);
                    } catch (e) {
                        console.log(e.message);
                    }
                    //responsive code end
                    //END SLIDERTOP--->>>
                }
            }
            $(document).ready(function() {
                SliderTopContent = $('#SliderTop').html();
                photoSlider();
            });
            $(window).bind('resize', photoSlider);
        </script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head><body>
        <!-- Docs master nav -->
        <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
            <div class="container">

                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar line-1"></span>
                        <span class="icon-bar line-2"></span>
                        <span class="icon-bar line-3"></span>
                    </button>
                    <a href="/home" class="navbar-brand">&nbsp;</a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" >
                    <ul class="nav navbar-nav">

                        <li>
                            <a href='#'>HOME</a>
                        </li>

                        <li>
                            <a href='#'>ABOUT</a>
                        </li>
                        <li>
                            <a href='#'>clothing</a>
                            <div class="">
                                <div class="group-menu">
                                    <div class="menu-group-title">Shop by collection</div>
                                    <ul class='dropdown-menu' role='menu'>
                                        <li><a href=""><span>Limited Edition</span></a></li>
                                        <li><a href=""><span>Modern Tailoring</span></a></li>
                                        <li><a href=""><span>Prom</span></a></li>
                                        <li><a href=""><span>Going Out</span></a></li>
                                        <li><a href=""><span>Style Steals</span></a></li>
                                    </ul>
                                </div>
                                <div class="group-menu second">
                                    <div class="menu-group-title">Shop by category</div>
                                    <ul class='dropdown-menu' role='menu'>
                                        <li><a href=""><span>Limited Edition</span></a></li>
                                        <li><a href=""><span>Modern Tailoring</span></a></li>
                                        <li><a href=""><span>Prom</span></a></li>
                                        <li><a href=""><span>Going Out</span></a></li>
                                        <li><a href=""><span>Style Steals</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href='#'>Inspiration</a>
                            <div class="">
                                <div class="group-menu">
                                    <div class="menu-group-title">Shop by collection</div>
                                    <ul class='dropdown-menu' role='menu'>
                                        <li><a href=""><span>Limited Edition</span></a></li>
                                        <li><a href=""><span>Modern Tailoring</span></a></li>
                                        <li><a href=""><span>Prom</span></a></li>
                                        <li><a href=""><span>Going Out</span></a></li>
                                        <li><a href=""><span>Style Steals</span></a></li>
                                    </ul>
                                </div>
                                <div class="group-menu second">
                                    <div class="menu-group-title">Shop by category</div>
                                    <ul class='dropdown-menu' role='menu'>
                                        <li><a href=""><span>Limited Edition</span></a></li>
                                        <li><a href=""><span>Modern Tailoring</span></a></li>
                                        <li><a href=""><span>Prom</span></a></li>
                                        <li><a href=""><span>Going Out</span></a></li>
                                        <li><a href=""><span>Style Steals</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href='#'>boutique</a>
                        </li>
                        <li>
                            <a href='#'>sale</a>
                        </li>
                        <li>
                            <a href='#'>wellness</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav pull-right cart">
                        <li class="">
                            <a href='#'>
                                3 items(s):<b>2 150 000 đ</b>
                            </a>
                        </li>
<!--                        <li>
                            <a href='#'>
                                <img src="images/tw.jpg"/>
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                <img src="images/in.jpg"/>
                            </a>
                        </li>-->
                    </ul>
                </nav>

            </div>
        </header>
        <div class="container">
            <div class="row">
                <div class="banner-home">
                    <div style="position: absolute;top: 0;width: 100%;height: 100%">
                        <div id="SliderTop" style="position: relative; top: 0px; left: 0px;width:678px;height:298px;z-index: 100">
                            <!-- Loading Screen -->
                            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                                     background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                                </div>
                                <div style="position: absolute; display: block; background: url(http://pxq.vn/libraries/jssorslider/img/loading.gif) no-repeat center center;
                                     top: 0px; left: 0px;width: 100%;height:100%;">
                                </div>
                            </div>
                            <!--  Container -->
                            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px;width:678px;height:298px">

                                <div>
                                    <img u="image" class="nailthumb-image resize-nailthumb" src="images/slider1.jpg" />
                                </div>
                                <div>
                                    <img u="image" class="nailthumb-image resize-nailthumb" src="images/slider2.jpg" />
                                </div>
                                <div>
                                    <img u="image" class="nailthumb-image resize-nailthumb" src="images/slider3.jpg" />
                                </div>

                            </div>
                            <!-- Direction Navigator Skin Begin -->

                            <!-- Arrow Left -->
                            <span u="arrowleft" class="jssord02l photo-prev ">
                            </span>
                            <!-- Arrow Right -->
                            <span u="arrowright" class="jssord02r photo-next ">
                            </span>
                            <!-- Direction Navigator Skin End -->
                            <div u="navigator" class="slider1-N" style="position: absolute; bottom: 4px; right: 4px;">
                                <div u="prototype" style="position: absolute; width: 12px; height: 12px;"></div>
                            </div>
                            <!-- ThumbnailNavigator Skin End -->
                            <a style="display: none" href="http://www.jssor.com">jQuery Carousel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container flip-container" 
                                     ontouchstart="this.classList.toggle('hover');"
                                     >
                                        <div class="front">
                                            <img class="flu" src="images/1.png"/>
                                        </div> 
                                        <div class="back"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="nailthumb halfsquare">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/3.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/2.jpg"/>
                                </div>
                                <div class="grav-title">
                                    <div>Idea outfit</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/4.jpg"/>
                                </div>
                                <div class="grav-title right">
                                    <div>Blogger Trend</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container flip-container" 
                                     ontouchstart="this.classList.toggle('hover');"
                                     >
                                        <div class="front">
                                            <img class="flu" src="images/5.png"/>
                                        </div> 
                                        <div class="back"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="nailthumb halfsquare">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/6.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container flip-container" 
                                     ontouchstart="this.classList.toggle('hover');"
                                     >
                                        <div class="front">
                                            <img class="flu" src="images/7.png"/>
                                        </div> 
                                        <div class="back"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/8.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container flip-container" 
                                     ontouchstart="this.classList.toggle('hover');"
                                     >
                                        <div class="front">
                                            <img class="flu" src="images/9.jpg"/>
                                        </div> 
                                        <div class="back"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/10.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="nailthumb halfsquare">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/11.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container flip-container" 
                                     ontouchstart="this.classList.toggle('hover');"
                                     >
                                        <div class="front">
                                            <img class="flu" src="images/12.jpg"/>
                                        </div> 
                                        <div class="back"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="row">
                        <div class="nailthumb square">
                            <div class="nailthumb-figure">
                                <div class="nailthumb-container">
                                    <img class="flu" src="images/13.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="col-sm-5">
                <div>
                    <p>Copyright © 2014 GRAVITY. All rights reserved.</p>
                </div>
            </div>
            <div class="col-sm-7 foot-menu">
                <div>
                    <p style="text-align: right;">
                        <a href="" class="social"><span class="fb"></span></a>
                        <a href="" class="social"><span class="tw"></span></a>
                        <a href="" class="social"><span class="in"></span></a>
                        <span>/</span>    <a href=""><span>register</span></a>   <span>/</span>   <a href="">login</a>   <span>/</span>   <a href="">privacy</a>   <span>/</span>  <a href="">about</a>   <span>/</span>   <a href="">contact</a>
                    </p>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>